<template>
    <div class="organizationIndex">
        <div class="banner">
            <div class="input" @click="toSearch">
                <i class="iconfont iconxuanchuan_icon_sousuo" style="font-size:13px;"></i>
                <span>请搜索学习课程或专题</span>
            </div>
            <img src="@as/img/og_banner.png">
            <i @click="toInformation" class="iconfont iconxuanchuan_icon_xiaoxi" style="font-size:18px;"></i>
        </div>
        <div class="container">
            <mu-load-more @load="load" :loading="loading">
                <!-- 公告 -->
                <div class="notice">
                    <div class="lf">
                        <img src="@as/img/zuzhi_shouye_tongzhi@2x.png.png" alt="">
                    </div>
                    <div class="rf">
                        <div class="recommend">
                            <span>推荐</span>
                        </div>
                        <div class="swiper-container center" id="swiper3" ref="swiper3">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(item,index) in indexList.infrom" :key="index"
                                     @click="notice_details(item)">
                                    <p>{{item.title}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="nest" @click="navtoMore">
                            <img src="@as/img/zuzhi_shouye_next@2x.png" alt="">
                        </div>
                    </div>
                </div>

                <div class="topic">
                    <div @click="organizationLife">
                        <img src="@as/img/zuzhi_shouye_icon_1@2x.png" alt>
                        <span>党的会议</span>
                    </div>
                    <div @click="activityApply">
                        <img src="@as/img/zuzhi_shouye_icon_2@2x.png" alt>
                        <span>工作计划</span>
                    </div>
                    <div @click="openClick">
                        <img src="@as/img/zuzhi_shouye_icon_3@2x.png" alt>
                        <span>活动报名</span>
                    </div>
                    <!--<div @click="inform">-->
                        <!--<img src="@as/img/zuzhi_shouye_icon_4@2x.png" alt>-->
                        <!--<span>谈心谈话</span>-->
                    <!--</div>-->
                    <div @click="workPlan">
                        <img src="@as/img/zuzhi_shouye_icon_5@2x.png" alt>
                        <span>党务公开</span>
                    </div>
                    <div @click="possy_js">
                        <img src="@as/img/zuzhi_shouye_icon_6@2x.png" alt>
                        <span>阵地建设</span>
                    </div>
                    <div @click="classify">
                        <img src="@as/img/zuzhi_shouye_icon_7@2x.png" alt>
                        <span>经费保障</span>
                    </div>
                    <div @click="institutionalConstruction">
                        <img src="@as/img/zuzhi_shouye_icon_8@2x.png" alt>
                        <span>群众监督</span>
                    </div>
                    <div @click="construction">
                        <img src="@as/img/zuzhi_shouye_icon_9@2x.png" alt>
                        <span>党员管理</span>
                    </div>
                    <div @click="fund_safeguard">
                        <img src="@as/img/zuzhi_shouye_icon_10@2x.png" alt>
                        <span>制度建设</span>
                    </div>
                </div>


                <div class="card">
                    <div class="left" @click="bigData"></div>
                    <div class="right">
                        <!-- @click="politicsBirthday" -->
                        <div @click.stop="navToZb"></div>
                        <div @click="toPartyMemberManagement"></div>
                    </div>
                </div>
                <div class="list" >
                    <div class="bar" v-for="(item,index) in info" :key="index" @click="jump(item)" v-show="index<3">
                        <div class="info">
                            <div class="info_top">
                                <!--type 1党务 2制度建设 3阵地建设 4工作计划 5活动报名 6自身建设 7经费保障 -->
                                <img v-if="item.type==1" src="@as/img/zuzhi_shouye_list_1@2x.png" alt>
                                <img v-if="item.type==2" src="@as/img/zuzhi_shouye_list_6@2x.png" alt>
                                <img v-if="item.type==3" src="@as/img/zuzhi_shouye_list_7@2x.png" alt>
                                <img v-if="item.type==4" src="@as/img/zuzhi_shouye_list_3@2x.png" alt>
                                <img v-if="item.type==5" src="@as/img/zuzhi_shouye_list_2@2x.png" alt>
                                <img v-if="item.type==6" src="@as/img/zuzhi_shouye_list_5@2x.png" alt>
                                <img v-if="item.type==7" src="@as/img/zuzhi_shouye_list_8@2x.png" alt>
                                <img v-if="item.type==8" src="@as/img/zuzhi_shouye_list_4@2x.png" alt>
                                <span class="tit" v-if="item.type==1">党务公开</span>
                                <span class="tit" v-if="item.type==2">制度建设</span>
                                <span class="tit" v-if="item.type==3">阵地建设</span>
                                <span class="tit" v-if="item.type==4">工作计划</span>
                                <span class="tit" v-if="item.type==5">活动报名</span>
                                <span class="tit" v-if="item.type==6">自身建设</span>
                                <span class="tit" v-if="item.type==7">经费保障</span>
                                <span>{{(item.create_time) | time}}</span>
                            </div>
                            <div class="info_bottom">
                                <div>
									<span>
										{{item.title}}
									</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 党的会议 -->
                <div class="meeting_record">
                    <div class="title">
                        <img src="@as/img/zuzhi_shouye_jlu@2x.png" alt="">
                        <span>会议记录</span>
                    </div>
                    <div class="pic">
                        <mu-grid-list class="gridlist-inline-demo" :cell-height="250" :cols="1.65">
                            <mu-grid-tile v-for="(item, index) in indexList.meeting" :key="index">
                                <div class="pic_list" @click="open_meeting(item)">
                                    <div class="tit">
                                        <p>{{item.name}}</p>
                                    </div>
                                    <span>{{(item.end_time) | time}}</span>
                                </div>
                            </mu-grid-tile>
                            <mu-grid-tile>
                                <div class="more" @click="organizationLife">
                                    <img src="@as/img/zuzhi_shouye_more@2x.png" alt="" class="ds">
                                    <span>查看更多</span>
                                    <img src="@as/img/zuzhi_shouye_more2@2x.png" alt="" class="step1">
                                    <img src="@as/img/zuzhi_shouye_more1@2x.png" alt="" class="step2">
                                </div>
                            </mu-grid-tile>
                        </mu-grid-list>
                    </div>
                </div>

                <div class="lists" >
                    <div class="bar" v-for="(item,index) in infos" :key="index" @click="jump(item)" v-show="index>3">
                        <div class="info">
                            <div class="info_top">
                                <!--type 1党务 2制度建设 3阵地建设 4工作计划 5活动报名 6自身建设 7经费保障 -->
                                <img v-if="item.type==1" src="@as/img/zuzhi_shouye_list_1@2x.png" alt>
                                <img v-if="item.type==2" src="@as/img/zuzhi_shouye_list_6@2x.png" alt>
                                <img v-if="item.type==3" src="@as/img/zuzhi_shouye_list_7@2x.png" alt>
                                <img v-if="item.type==4" src="@as/img/zuzhi_shouye_list_3@2x.png" alt>
                                <img v-if="item.type==5" src="@as/img/zuzhi_shouye_list_2@2x.png" alt>
                                <img v-if="item.type==6" src="@as/img/zuzhi_shouye_list_5@2x.png" alt>
                                <img v-if="item.type==7" src="@as/img/zuzhi_shouye_list_8@2x.png" alt>
                                <img v-if="item.type==8" src="@as/img/zuzhi_shouye_list_4@2x.png" alt>
                                <span class="tit" v-if="item.type==1">党务公开</span>
                                <span class="tit" v-if="item.type==2">制度建设</span>
                                <span class="tit" v-if="item.type==3">阵地建设</span>
                                <span class="tit" v-if="item.type==4">工作计划</span>
                                <span class="tit" v-if="item.type==5">活动报名</span>
                                <span class="tit" v-if="item.type==6">自身建设</span>
                                <span class="tit" v-if="item.type==7">经费保障</span>
                                <span>{{(item.create_time) | time}}</span>
                            </div>
                            <div class="info_bottom">
								<span>
								  {{item.title}}
								</span>
                            </div>
                        </div>
                    </div>
                    <div class="loading" v-if="loadOver&&p!=1" :class="{'notpageOne':p>1}">{{loaded}}</div>
                </div>
            </mu-load-more>
        </div>
    </div>
</template>

<script>
    import Swiper from "swiper";

    export default {
        data() {
            return {
                loading: false,
                notMore: false,
                loaded: '加載更多...',
                p: 1,
                page: 5,
                info: [],//前三
                infos: [],//除去前三
                indexList: {},
                infrom:[
                    {
                        id: 11,
                        title: "大大大大叔的"
                    },
                    {
                        id: 11,
                        title: "暂时是是是是是 是是 "
                    }
                ],
                org_name: "",
                loadOver: false
            };
        },
        mounted() {
            this.$progress.done();
            this.getindex(1);
            this.org_name = JSON.parse(Cookies.get('user_71ydj')).organization
            new Swiper(".center", {
                direction: 'vertical', // 垂直切换
                autoplay: true,
                lazy: true,
                loop: true,
            });
        },
        methods: {
            navToZb() {
                this.$router.push({path: '/mine/Organization'})
            },

            jump: function (item) {
                if (item.type == 1) {
                    // 党务公开
                    this.$router.push({path: '../organization/open_details', query: item})
                }
                if (item.type == 2) {
                    // 制度建设
                    this.$router.push({path: '../organization/systemDetails', query: item})
                }
                // 阵地建设
                if (item.type == 3) {
                }
                if (item.type == 4) {
                    // 工作计划
                    this.$router.push({path: '../organization/workplanDetails', query: item})
                }
                if (item.type == 5) {
                    // 活动报名
                    this.$router.push({path: '../organization/activityDetails', query: item})
                }
                if (item.type == 6) {
                    // 自身建设
                    this.$router.push({path: '../organization/oneselfDetails', query: item})
                }
                // 经费保障
                if (item.type == 7) {
                }
            },
            // 通知发布
            notice_details(item) {
                this.$router.push({path: '../organization/notice_details', query: item})
            },
            // notice_details () {
            // 	this.$router.push({ path: '../organization/notice_details' , query: {uid:85,id:70} })
            // },
            open_meeting: function (item) {
                this.$router.push({path: '../organization/meetingDetails', query: item})
            },
            toPartyMemberManagement() {
                this.$router.push('/mine/PartyMemberManagement')
            },
            classify() {
                this.$router.push('/organization/fund_safeguard')
            },
            navtoMore(){
                this.$router.push('/organization/classify')
            },
            supervise() {
                this.$router.push('organization/supervise')
            },
            construction() {
                this.$router.push('mine/PartyMemberManagement')
            },
            selfBuildingList() {
                this.$router.push('organization/selfBuildingList')
            },
            fund_safeguard() {
                this.$router.push('/organization/institutionalConstruction')
            },
            inform() {
                this.$alert('该栏目暂未开放，敬请期待')
                // this.$router.push('organization/inform')
            },
            openClick() {
                this.$router.push('organization/activityApply')
            },
            reportProblems() {
                this.$router.push('organization/reportProblems')
            },
            institutionalConstruction() {
                this.$router.push('organization/inform')
            },
            workPlan() {
                this.$router.push('organization/party_affairs_open')
            },
            activityDetails() {
                this.$router.push('organization/activityDetails')
            },
            meetingDetails() {
                this.$router.push('organization/meetingDetails')
            },
            summaryDetails() {
                this.$router.push('organization/summaryDetails')
            },
            newSummary() {
                this.$router.push('organization/newSummary')
            },
            activityApply() {
                this.$router.push('organization/workPlan')
            },
            organizationLife() {
                this.$router.push('organization/organizationLife')
            },
            possy_js() {
                this.$router.push('organization/possy_js')
            },
            politicsBirthday() {
                this.$router.push('organization/politicsBirthday')
            },
            toSearch() {
                this.$router.push('propaganda/details/search')
            },
            toInformation() {
                this.$router.push('propaganda/details/information')
            },
            bigData() {
                this.$router.push('home/bigData')
            },
            getindex(p) {
                let that = this;
                // that.list=[];
                that.$http
                    .get("/app/Organization/new_index", {
                        uid: JSON.parse(Cookies.get('user_71ydj')).id,
                        p: p,
                        page: that.page,
                    })
                    .then(res => {
                        if (res.data.list.length) {
                            that.indexList = res.data;
                            that.infos.push(...res.data.list);
                            // that.infos.splice(0, 3);
                            // if (p == 1) {
                            //     for (var i = 0; i <= 2; i++) {
                            //         that.info.push(res.data.list[i])
                            //     }
                            // }
                        };
                        console.log(that.infos);
                        this.loadOver = false;
                        that.$nextTick(function () {
                            new Swiper("#swiper3", {
                                direction: 'vertical',
                                loop: true,
                                autoplay: 1000,
                            });
                        })
                        if (p != 1) {
                            console.log(res.data);
                            if (res.data.list.length) {
                            } else {
                                this.loadOver = true;
                                this.loading = false;
                                this.loaded = '没有更多数据了'
                                return false
                            }
                        } else {
                            if (!res.data.list.length) {
                                this.notMore = true;
                                this.loadOver = false;
                            } else {
                                if (res.data.list.length < 5 && res.data.list.length != 0) {
                                    this.loadOver = true;
                                    this.loaded = '没有更多数据了'
                                }
                            }
                        }

                        // if (that.infos.length == 0) {
                        // 	that.loaded = "没有更多";
                        // 	that.loading = true;
                        // 	that.notMore = false;
                        // 	return;
                        // }
                        //
                        // if (that.infos.length < 10) {
                        // 	that.loaded = "没有更多了";
                        // 	that.notMore = false;
                        // 	return;
                        // };

                    })
                ;
            },
            load() {
                // alert(123)
                //因为load 触发多次 所以做分时节流
                if (!this.loadOver) {
                    this.loading = true;
                    clearTimeout(this.method);
                    this.method = setTimeout(() => {
                        this.p = this.p + 1;
                        this.getindex(this.p);
                        this.loading = false;
                    }, 2000);
                }
                // this.loading = true;
                // if (this.notMore) {
                // 	clearTimeout(this.method);
                // 	this.method = setTimeout(() => {
                // 		this.p = this.p + 1;
                // 		this.getindex();
                // 	}, 500);
                // }
            },

        },
        created() {

        }
    };
</script>


<style scoped>
    .mu-load-more {
        /*min-height:100vh;*/
        /*overflow-y: auto !important;*/
        /* padding: 0 0 15px 0!important; */
    }

    .mu-infinite-scroll {
        height: 0 !important;
    }
</style>
<style scoped lang="scss">
    // 顶部
    .top {
        margin: 0;
        padding: 10px 0 0 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .title {
            margin: 0 !important;
            font-size: 19px;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 60px;
            img {
                width: 19px;
                height: 19px;
            }
        }
    }

    // 滚动公告
    .notice {
        width: 100%;
        padding: 5px 0;
        margin-top: 25px;
        display: flex;
        align-items: center;
        .lf {
            width: 20%;
            display: flex;
            align-items: center;
            img {
                width: 63px;
                height: 17.5px;
            }
        }
        .rf {
            width: 78%;
            display: flex;
            align-items: center;
            margin-left: 2%;
            justify-content: space-between;
            .recommend {
                /*width: 30px;*/
                height: 15px;
                border: 1px solid #eb4d44;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 3px;
                padding: 0 2px;
                span {
                    font-size: 12px;
                    color: #eb4d44;
                }
            }
            .center {
                width: 82%;
                height: 20px;
                .swiper-wrapper {
                    width: 100%;
                    height: 100%;
                    .swiper-slide {
                        width: 100%;
                        height: 100%;
                        touch-action: none;
                        p {
                            font-size: 12px;
                            color: #666;
                            line-height: 1.8;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
            .nest {
                display: flex;
                align-items: center;
                img {
                    width: 7.5px;
                    height: 14px;
                }
            }
        }
    }

    // 菜单
    .topic {
        width: 100%;
        margin-top: 25px;
        display: flex;
        justify-content: stretch;
        /*justify-content: space-between;*/
        flex-wrap: wrap;
        & > div {
            width: 20%;
            height: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            img {
                width: 51px;
            }

            span {
                font-size: 11px;
                color: #333;
            }
        }

        * {
            font-size: 14px;
        }
    }

    .meeting_record {
        width: calc(100% + 32px);
        padding: 15px 0 0 0;
        margin-left: -16px;
        margin-right: -16px;
        overflow: hidden;
        margin-bottom: 39px;
    }

    .meeting_record .title {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 0;
    }

    .meeting_record .title img {
        width: 6px;
        height: 21.5px;
    }

    .meeting_record .title span {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-left: 9px;
    }

    .gridlist-inline-demo {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .mu-grid-tile-titlebar {
        display: none;
    }

    .pic {
        width: 100%;
        height: 140px;
        padding: 15px 0 0 15px;
        box-sizing: border-box;
    }

    .pic_list {
        width: 206.5px;
        height: 112px;
        background: url("~@as/img/zuzhi_shouye_beij@2x.png") center center no-repeat;
        background-size: 100% 100%;
        border-radius: 5px;
        box-shadow: 0 4px 5px 2px #f3f3f3;
        padding: 15px 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 10px;
        border-radius: 5px;
    }

    .more {
        width: 206.5px;
        height: 112px;
        background: #eee;
        border-radius: 5px;
        padding: 35px 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 10px;
        border-radius: 5px;
        position: relative;
        align-items: center;
    }

    .more .ds {
        position: absolute;
        width: 80.5px;
        height: 66px;
        left: 0;
        bottom: 0;
    }

    .more span {
        font-size: 16px;
        color: #aaa;
        display: inline-block;
        line-height: 1;
    }

    .more .step1 {
        width: 103.5px;
        height: 2px;
    }

    .more .step2 {
        width: 31.5px;
        height: 10px;
    }

    .pic_list .tit {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .pic_list .tit p {
        font-size: 16px;
        color: #333;
        display: inline-block;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .pic_list span {
        font-size: 12px;
        color: #999;
    }

    .list {
        width: 100%;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        .bar {
            width: 100%;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(247, 247, 247, 1);
            box-shadow: 0px 7px 13px 0px rgba(230, 230, 230, 0.16);
            border-radius: 4px;
            margin-bottom: 24px;
            &:last-child{
                background: red;
                margin-bottom: 0;
            }

        }
    }

    .lists {
        width: 100%;
        display: flex;
        flex-direction: column;

        .bar {
            width: 100%;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(247, 247, 247, 1);
            box-shadow: 0px 7px 13px 0px rgba(230, 230, 230, 0.16);
            border-radius: 4px;
            margin-bottom: 24px;
            &:last-child{
                margin-bottom: 0;
            }

        }
        .loading {
            width: 100%;
            font-size: 14px;
            color: #dddddd;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 24px;
            &.notpageOne{
                margin-top: -10px;
            }
        }
    }

    .info {
        width: 100%;
        box-sizing: border-box;
        padding: 8px 16px;
        .info_top {
            display: flex;
            align-items: center;
            height: 39px;
            border-bottom: 1px solid rgb(221, 221, 221);
            img {
                box-sizing: border-box;
                padding: 5px;
                width: 25px;
                height: 25px;
                background: rgba(248, 234, 234, 1);
                border-radius: 50%;
                margin-right: 7px;
            }
            span {
                font-size: 12px;
                font-family: PingFang-SC-Medium;
                font-weight: 500;
                color: rgba(153, 153, 153, 1);
            }
            .tit {
                flex: 1;
                font-size: 14px;
                font-family: PingFang-SC-Bold;
                font-weight: bold;
                color: rgba(153, 153, 153, 1);
            }
        }
        .info_bottom {
            padding: 13px 0 25px;
            font-size: 16px;
            font-family: PingFang-SC-Medium;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
            line-height: 24px;
            /*word-wrap: break-word;*/
            overflow-wrap: break-word;
        }
    }

    .title {
        font-size: 22px;
        color: #333;
        margin-bottom: 22px;
    }

    .banner {
        position: relative;
        height: 218px;
        .input {
            display: flex;
            align-items: center;
            position: absolute;
            top: 22px;
            left: 17px;
            width: 307px;
            height: 36px;
            background: rgba(192, 34, 31, .4);
            border-radius: 18px;
            font-size: 13px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            padding-left: 15px;
            i {
                margin-right: 12px;
            }
        }
        img {
            width: 100%;
        }
        > i {
            color: #fff;
            position: absolute;
            right: 16px;
            top: 27px;
        }
    }

    .container {
        box-sizing: border-box;
        width: 343px;
        height: auto;
        margin-bottom: 50px;
        padding: 0;
    }

    .everyLearn {
        background: url("~@as/img/xuexi_shouye_meiriyixue@2x.png") center center no-repeat;
        background-size: 100% 100%;
        .title {
            font-size: 18px;
            color: #333;
            margin-bottom: 10px;
            font-weight: bold;
        }

        & > p {
            font-size: 12px;
            color: #999;
        }

        .btn {
            width: 60px;
            height: 20px;
            margin-top: 17px;
            font-size: 10px;
            background: #eb4d44;
            color: #fff;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
        }
    }

    .card {
        margin-top: 25px;
        width: 100%;
        height: 160px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
            margin: 0;
            font-size: 16px;
            color: #333;
            margin-top: 8px;
            margin-left: 15px;
            font-weight: bold;
            margin-bottom: 9px;
        }
        p {
            margin: 0;
            font-size: 11px;
            color: #999;
            margin-left: 15px;
        }
        .left {
            width: 150px;
            height: 160px;
            background: url("~@as/img/zuzhi_shouye_meiyueyikao@2x.png") center center no-repeat;
            background-size: 100% 100%;
        }
        .right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            width: 186px;
            height: 160px;
            div {
                width: 186px;
                height: 76.5px;
                background: url("~@as/img/zuzhi_shouye_xuexibiji@2x.png.png") center center no-repeat;
                background-size: 100% 100%;
            }
            div + div {
                background: url("~@as/img/zuzhi_shouye_xuexibiji@2x.png") center center no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    .organizationIndex   /deep/ .mu-circle-spinner{
        border-color: #e5e5e5;
    }
    /*.loading {*/
        /*width: 100%;*/
        /*font-size: 14px;*/
        /*color: #dddddd;*/
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: center;*/
        /*margin-top: 24px;*/
    /*}*/
</style>